<template>
  <div class="leagueListPane">
    <div class="leagueInfo" v-for="(bookskinds,index) in bookskind" :key="index"><!-- v-for 不能写到当前组件的根目录-->
      <div class="leagueTitle"  v-on:mouseover="leagueChange(index)">
        <span class="nameSpan">{{bookskinds.bkname}}</span>
      </div>
      <div class="teamListPane" v-show="index==num" >
        <div class="teamInfo"  v-for="(book,bookIndex) in bookskinds.books" :key="index">
          <div class="imgDiv"><img :src="getImgUrl(book.bimg)"></div>
          <div class="nameDiv">{{book.bname}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../../../axios/api"
export default {
  name: "index",
  data(){
    return {
      bookskind:"",//定义一个空的数组
     num : 2  //默认显示的下标为0
    }
  },

  methods: {
    getImgUrl: function (imgsrc) {
      return this.$store.state.host + "/upload/images/books/"+ imgsrc;
    },

    setDataFromAxios: function () {
      //this.initpic();
      //console.log(pno)
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
      api.setDataFromAxios( "/api/bookskindController/selectBookskindWithbooks", null, "post")
        .then(dto => {
          this.bookskind = dto.tList;

        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        // .then(res=>{this.bookskind = res.bookskind});
    },
    leagueChange:function(index){
      this.num = index;
    },

  },
  created() {
    this.setDataFromAxios();

  }
}
</script>

<style lang="stylus">
.leagueListPane
  margin 0 auto
  width 100%
  height px;
  position relative
  .leagueInfo
    float right
    margin-right 1px;
    //width 80px;
    height 10px;
    padding-left 20px
    .leagueTitle
      .imgSpan
        width   40px
        height  36px
        display inline-block
        img
          width   40px
          height  36px
          display inline-block
      .nameSpan
        font-size 0.85rem
        width 40px
        height 30px
        line-height 30px
        //display inline-block
    .teamListPane
      width 100%
      position absolute
      left 0
      .teamInfo
        width 16.6%
        float left
        margin 20px 0 0 0
        .imgDiv
          width 81%
          height 150px
          padding-left 20px
          img
            width 100%
            height 150px
       .nameDiv
         padding-left 20px
.leagueInfo:after
  clear both
  display block
  content ""

</style>
